<template>
  <div class="content">

    <div class="line">
      <div class="text">
        用户手机号：
      </div>
      <div class="input">
        <i-input type="text" v-model="phone" placeholder="请输入手机号" style="width: 300px"></i-input>
      </div>
    </div>

    <div class="line">
      <div class="text">
        消费次数：
      </div>
      <div class="input">
        <i-input type="text" v-model="useCardCount" placeholder="请输入消费次数" style="width: 300px"></i-input>
      </div>
    </div>

    <div class="line" v-for="(item,index) in tempList1" :key="index">
      <div class="text">
        金额：
      </div>
      <div class="input">
        <i-input type="text" v-model="item.value" :number="true" placeholder="请输入消费金额" style="width: 300px"></i-input>
      </div>
    </div>

    <div class="line">
      <div class="text">
        选择pos机：
      </div>
      <div class="input">
        <select v-model="posId" style="width:150px">
            <option v-for="item in postList" :key="item.posId" :value="item.posId">
              {{item.posName}}
            </option>
        </select>
      </div>
    </div>

    <div class="line">
       <i-button type="info"  @click="handleAddManager">添加消费信息</i-button>
    </div>
  </div>

</template>

<script>
import axios from 'axios'
import UploadImg from './UploadImg'
export default {
  name: 'UserJihuo',
  components: {
    UploadImg
  },
  data () {
    return {
      useCardList:'',
      deductionate:'',
      rate:'',
      posId:'',
      useCardCount:'',
      phone:'',
      moneys:[],
      tempList:[],
      tempList1:[],
      postList:[]
    }
  },
  mounted () {
    this.getPostListInfo();
  },
  watch: {
    useCardCount: function (val) {
      this.tempList.length=val
      this.tempList1.splice(0,this.tempList1.length)
      for (let index = 0; index < this.tempList.length; index++) {
        var temp = {
                   id:index,
                   value:"",
                  }
                  console.log("temp",temp);

        this.tempList1.push(temp);
        console.log("this.tempList1",this.tempList1);
      }
    }
  },
  methods: {
        getPostListInfo(){
          var _this = this;
          axios.post('/web/api/podji/list').then(
                  function(res) {
                      var data = res.data.date;
                      _this.postList=data
                      console.log("_this.postList=====",_this.postList);
                  })
        },
        jianyan(){
          if(this.posName === ''){
            this.$Message.success("请输入pos机名称");
            return false;
          }
        },
        handleAddManager(){
           console.log("this.tempList==",this.tempList1);
           console.log("this.posId==",this.posId);

             this.moneys.splice(0,this.moneys.length)
           for (let index = 0; index < this.tempList1.length; index++) {
             const element = this.tempList1[index];
             this.moneys.push(element.value);
           }


           for (let index = 0; index < this.postList.length; index++) {
             const element = this.postList[index];
             if(this.posId==element.posId){
               this.rate=element.rate
               this.deductionate=element.deductionate
             }
           }



           console.log("this.moneys==",this.moneys);
            console.log("this.posId==",this.posId);
            console.log("this.rate==",this.rate);
            console.log("this.deductionate==",this.deductionate);
            var params =
            {
              "useCardList":
              [
                {"useCardCount":this.useCardCount,"phone":this.phone,"moneys":this.moneys,"posId":this.posId,"rate":this.rate,"deductionate":this.deductionate}
              ]
            }

             console.log("params==",params);


            axios.post('/web/api/manager/initUserCradBonus',params).then(
                  function(res) {
                      console.log("res=====",res);
                      alert(res.data.message);
                  })


        }


  }
}
</script>
<style lang="stylus" scoped>
.content {
    width: 100%;
    text-align: center;
    font-size: 1.8rem;
    line-height: 2.6;
    .line{
      width:80%;
      text-align: center;
      .text{
        text-align :right;
        width:50%;
        float :left;
      }
      .input{
        width:50%;
        float :left;
      }
    }

}
</style>

